import React, { useCallback, useEffect, useState } from "react";
import { Form, Button, Checkbox, Space, DatePicker, message, Popconfirm, Image } from "antd";
import { PrefixPlaceholder, Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import BtnGroup from "@/views/components/BtnGroup";
import RangeDisablePicker from "@/views/components/RangeDisablePicker";
import { DownOutlined, ShoppingFilled, TagFilled } from "@ant-design/icons";
import ShopIcons from "@/pages/OrderModule/common/bizcomponents/SelectShopModal/ShopIcons";
import { CommonText, StatusText } from "@/pages/OrderModule/common/components/CommonText";

import SelectShopInputModal from "@/views/components/SelectShopInputModal";

import {
	getLabelByValue,
	SYSTEM_PRODUCT_TYPE,
	SKU_SALES_STATUS,
	SPU_SYNC_STATUS_2,
	SYNC_STOCK_TYPES
} from "@/views/utils/constant";

export default ({ handleCommand }) => {
	const [tabValue, setTabValue] = useState("sku");

	const defaultColumns = [
		{
			tabs: ["sku"],
			hidden: true,
			search: {
				order: 1,
				// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
				content: () => (
					<BtnGroup
						value="sku"
						onChange={value => {
							console.log("ShopGoods => columns => onTypeChange", value);
							setTabValue(value);
						}}
						options={[
							{
								label: "按款式",
								value: "spu",
								icon: <ShoppingFilled className="mr4" />
							},
							{
								label: "SKU",
								value: "sku",
								icon: <TagFilled className="mr4" />
							}
						]}
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			hidden: true,
			search: {
				order: 1,
				// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
				content: () => (
					<BtnGroup
						value="spu"
						onChange={value => {
							console.log("ShopGoods => columns => onTypeChange", value);
							setTabValue(value);
						}}
						options={[
							{
								label: "按款式",
								value: "spu",
								icon: <ShoppingFilled className="mr4" />
							},
							{
								label: "SKU",
								value: "sku",
								icon: <TagFilled className="mr4" />
							}
						]}
					/>
				)
			}
		},
		{
			tabs: ["sku", "spu"],
			name: "序号",
			code: "index",
			align: "center",
			render: (t, r, i) => i + 1,
			lock: true,
			width: 55
		},

		{
			tabs: ["sku", "spu"],
			name: "平台/店铺",
			code: "ecStoreIds",
			width: 200,
			render: (_, record, i) => (
				<>
					<div className="flex">
						<CommonText icon={record.ecType ? <ShopIcons type={record.ecType} /> : null} as="s1" />
						<div>{record.ecStoreName}</div>
					</div>
				</>
			),
			search: {
				order: 2,
				content: form => <SelectShopInputModal multiple={true} placeholder="平台/店铺" />
			}
		},
		{
			tabs: ["sku"],
			name: "图片",
			code: "image",
			width: 55,
			render: (_, record, i) => (
				<>
					<Image className="auto" width={32} height={32} src={record.image} />
				</>
			)
		},
		{
			tabs: ["spu"],
			name: "图片",
			code: "image",
			width: 55,
			render: (_, record, i) => (
				<>
					<Image className="auto" src={record.spuImage} />
				</>
			)
		},
		{
			tabs: ["sku"],
			name: "商品名称",
			code: "skuName",
			width: 200,
			search: {
				order: 3,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						maxItem={4}
						modalProps={{
							width: "449px"
						}}
						prefix="商品名"
						placeholder="商品名称"
						message="多个商品名称， 每行输入1个内容，最多4个"
						areaPlaceholder="例如：&#10;2021年&#10;春秋&#10;四件套"
					/>
				)
			}
		},

		{
			tabs: ["spu"],
			name: "商品名称",
			code: "spuName",
			width: 200,
			search: {
				order: 3,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						maxItem={4}
						placeholder="商品名称"
						message="多个商品名称， 每行输入1个内容，最多4个"
						areaPlaceholder="例如：&#10;2021年&#10;春秋&#10;四件套"
					/>
				)
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 4,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						placeholder="多个款式编码，以逗号隔开"
						message="多个款式编码，以逗号分隔或每行一个款式编码"
					/>
				)
			}
		},
		{
			tabs: ["sku"],
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 6,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "商品编码" }}
						placeholder="多个商品编码，以逗号隔开"
						message="多个商品编码，以逗号分隔或每行一个商品编码"
					/>
				)
			}
		},
		{
			tabs: ["spu"],
			hidden: true, // 款式列表 没有 商品编码
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 6,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						modalProps={{ title: "商品编码" }}
						placeholder="多个商品编码，以逗号隔开"
						message="多个商品编码，以逗号分隔或每行一个商品编码"
					/>
				)
			}
		},
		{
			tabs: ["sku"],
			name: "颜色规格",
			code: "skuSpec"
		},
		{
			tabs: ["sku"],
			name: "价格（元）",
			code: "skuPrice",
			render: v => <span className="red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{
			tabs: ["spu"],
			name: "价格（元）",
			code: "spuPrice",
			render: (_, record) => {
				const { skuPriceMin, skuPriceMax, spuPrice } = record;
				if ([undefined, null].includes(spuPrice)) {
					if (skuPriceMin && skuPriceMax) {
						if (skuPriceMin == skuPriceMax) {
							return `${skuPriceMin}`;
						}
						return `${skuPriceMin}~${skuPriceMax}`;
					}
					if (skuPriceMin) {
						return `${skuPriceMin}`;
					}
					if (skuPriceMax) {
						return `${skuPriceMax}`;
					}
					return "-";
				}
				return spuPrice;
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "平台skuid",
			code: "skuId",
			hidden: tabValue == 'sku' ? false : true, // 款式列表 没有 平台skuid
			search: {
				order: 7,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						placeholder="多个平台skuid，以逗号隔开"
						message="多个平台skuid，以逗号分隔或每行一个平台skuid"
					/>
				)
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "平台款式ID",
			code: "spuId",
			search: {
				order: 5,
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						placeholder="多个平台款式ID，以逗号隔开"
						message="多个平台款式ID，以逗号分隔或每行一个平台款式ID"
					/>
				)
			}
		},

		{
			tabs: ["sku"],
			name: "原始商品编码",
			code: "skuOriginalCode",
			search: {
				order: 10,
				code: "skuOriginalCodeIsNull",
				content: () => (
					<Select
						placeholder="原始编码是否为空"
						options={[
							{
								value: "",
								label: "全部"
							},
							{
								value: "1",
								label: "是"
							},
							{
								value: "0",
								label: "否"
							}
						]}
					/>
				)
			}
		},

		{
			tabs: ["sku"],
			name: "系统商品类型",
			code: "sysSkuType",
			hidden: true,
			search: {
				order: 11,
				code: "sysSkuType",
				content: () => (
					<Select
						placeholder="绑定系统商品类型"
						options={[
							{
								value: "",
								label: "全部"
							},
							{
								value: "1",
								label: "单品"
							},
							{
								value: "2",
								label: "组合装"
							},
							{
								value: "0",
								label: "未绑定"
							}
						]}
					/>
				)
			}
		},

		{
			tabs: ["sku"],
			name: "线上库存",
			code: "skuOnlineInventory"
		},
		{
			tabs: ["spu"],
			name: "线上库存",
			code: "spuOnlineInventory"
		},
		{
			tabs: ["sku", "spu"],
			name: "可用库存",
			code: "availableStock"
		},
		{
			tabs: ["sku"],
			name: "虚拟库存",
			code: "skuVirtualInventory"
		},
		{
			tabs: ["spu"],
			name: "虚拟库存",
			code: "spuVirtualInventory"
		},
		{
			tabs: ["sku"],
			name: "库存同步状态",
			code: "isSyncInventory",
			width: 160,
			render: (value, record, i) => (
				<span className={value == "0" ? "before-dot-error" : value == "1" ? "before-dot-success" : "before-dot-default"}>
					{getLabelByValue(SPU_SYNC_STATUS_2, String(value))}
					{value == "1" && `(${getLabelByValue(SYNC_STOCK_TYPES, String(record.syncType))})`}
				</span>
			)
		},
		{
			tabs: ["spu"],
			name: "库存同步状态",
			code: "isSyncInventory",
			width: 180,
			render: (value, record, i) => (
				<>
					<span className={value == "0" ? "before-dot-error" : value == "1" ? "before-dot-success" : "before-dot-default"}>
						{getLabelByValue(SPU_SYNC_STATUS_2, String(value))}
						{value != 0 && (
							<Button
								type="link"
								onClick={() => {
									handleCommand("跳转SKU列表，按query刷新列表", { spuCode: record.spuCode });
								}}
							>
								查看库存同步详情
							</Button>
						)}
					</span>
				</>
			)
		},
		{
			tabs: ["sku"],
			name: "最后同步库存",
			code: "skuLastSyncInventory"
		},
		// {
		// 	tabs: ["spu"],
		// 	name: "最后同步库存",
		// 	code: "spuLastSyncInventory",
		// 	render: (_, record) => {
		// 		const { spuLastSyncInventoryMin, spuLastSyncInventoryMax } = record;
		// 		if (spuLastSyncInventoryMin && spuLastSyncInventoryMax) {
		// 			if (spuLastSyncInventoryMin == spuLastSyncInventoryMax) {
		// 				return `${spuLastSyncInventoryMin}`;
		// 			}
		// 			return `${spuLastSyncInventoryMin}~${spuLastSyncInventoryMax}`;
		// 		}
		// 		if (spuLastSyncInventoryMin) {
		// 			return `${spuLastSyncInventoryMin}`;
		// 		}
		// 		if (spuLastSyncInventoryMax) {
		// 			return `${spuLastSyncInventoryMax}`;
		// 		}
		// 		return "-";
		// 	}
		// },
		{
			tabs: ["sku", "spu"],
			name: "最后同步时间",
			code: "skuLastSyncTime"
		},
		{
			tabs: ["sku"],
			name: "销售状态",
			code: "skuSaleStatus",
			render: (value, record, i) => (
				<span className={value == "0" ? "before-dot-error" : value == "1" ? "before-dot-success" : "before-dot-default"}>
					{getLabelByValue(SKU_SALES_STATUS, String(value))}
				</span>
			),
			search: {
				order: 9,
				content: () => <Select placeholder="销售状态" options={SKU_SALES_STATUS} />
			}
		},
		{
			tabs: ["spu"],
			name: "销售状态",
			code: "spuSaleStatus",
			render: (value, record, i) => (
				<span className={value == "0" ? "before-dot-error" : value == "1" ? "before-dot-success" : "before-dot-default"}>
					{getLabelByValue(SKU_SALES_STATUS, String(value))}
				</span>
			),
			search: {
				order: 9,
				content: () => <Select placeholder="销售状态" options={SKU_SALES_STATUS} />
			}
		},

		{
			tabs: ["sku"],
			name: "奇门备注",
			code: "qimenRemark",
			search: {
				order: 8,
				content: () => <Input allowClear placeholder="奇门备注" />
			}
		},

		{
			tabs: ["sku", "spu"],
			name: "创建时间",
			code: "createTime",
			width: 160,
			search: {
				order: 12,
				span: 6,
				keys: ["createTimeStart", "createTimeEnd"],
				content: () => <RangeDisablePicker showTime diff="6 months" className="width-full" />
			}
		},
		{ tabs: ["sku", "spu"], name: "最后修改时间", code: "updateTime", width: 160 },
		{
			tabs: ["sku"],
			name: "系统商品",
			code: "sysType",
			render: (_, record) => <>{record.sysType ? getLabelByValue(SYSTEM_PRODUCT_TYPE, record.sysType) : '未绑定'}</>
		},
		{
			tabs: ["sku"],
			name: "系统商品图片",
			code: "sysImage",
			render: (sysImage, record, i) => <>{sysImage && <Image className="auto" width={32} height={32} src={sysImage} />}</>
		},
		{ tabs: ["sku"], name: "系统商品编码", code: "sysCode" },
		{ tabs: ["sku"], name: "系统款式编码", code: "sysSpuCode" },
		{ tabs: ["sku"], name: "系统商品名称", code: "sysSkuName" },
		{ tabs: ["sku"], name: "系统颜色规格", code: "sysSpce" },
		{
			tabs: ["sku", "spu"],
			lock: true,
			code: "action",
			width: tabValue == "sku" ? 160 : 80,
			name: "操作",
			align: "center",
			render(_, record) {
				return (
					<>
						{tabValue == "spu" &&
							(record.spuSaleStatus == "0" ? (
								<Popconfirm
									placement="leftTop"
									title="是否确定上架？"
									onConfirm={() => {
										const data = {
											params: {
												ids: [record.id],
												saleStatus: "1"
											},
											isSkuType: false
										};
										handleCommand("spu单列上架", data);
									}}
									onCancel={() => {}}
								>
									<Button type="link">上架</Button>
								</Popconfirm>
							) : (
								<Popconfirm
									placement="leftTop"
									title="是否确定下架？"
									onConfirm={() => {
										const data = {
											params: {
												ids: [record.id],
												saleStatus: "0"
											},
											isSkuType: false
										};
										handleCommand("spu单列下架", data);
									}}
									onCancel={() => {}}
								>
									<Button type="link">下架</Button>
								</Popconfirm>
							))}
						{tabValue == "sku" && (
							<Button
								type="link"
								className="mr8"
								onClick={() => {
									handleCommand("编辑库存", record);
								}}
							>
								编辑库存
							</Button>
						)}
						{tabValue == "sku" && (
							<Popconfirm
								placement="leftTop"
								title="是否跳转至系统商品进行匹配操作？"
								onConfirm={() => {
									handleCommand("匹配", record);
								}}
								onCancel={() => {}}
							>
								<Button type="link">匹配</Button>
							</Popconfirm>
						)}
					</>
				);
			}
		}
	];

	const getColumns = useCallback(
		t => {
			return defaultColumns.filter(e => e.tabs.includes(t));
		},
		[tabValue]
	);
	const [columns, setColumns] = useState(getColumns("sku"));
	const [isSkuType, setIsSkuType] = useState(true);
	useEffect(() => {
		setIsSkuType(tabValue === "sku");
		setColumns(getColumns(tabValue));
	}, [tabValue]);
	useEffect(() => {
		console.log(isSkuType, "isSkuType");
	}, [isSkuType]);
	useEffect(() => {}, [columns]);
	return { isSkuType, tabValue, setTabValue, columns, defaultColumns, setColumns };
};
